<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

<html>
       <f:view>
          <head>
             <title>
                Create Time Slot
             </title>
          </head>

          <body>
             	<h:form id="createTimeSlotForm">
			    <hr />
				<h:panelGrid columns="6">
					<h:panelGroup>
					<h:outputText value="#{eventController.user.firstName}" />
					<h:outputText value=" " />
					</h:panelGroup>
					<h:outputText value="&nbsp;&nbsp;-&nbsp;&nbsp;" escape="false" />
					<h:commandLink action="#{homeController.home}">
			   			<f:param value="#{eventController.user.id}" name="userId" />
						<h:outputText value="Home" />
					</h:commandLink>
					<h:commandLink action="#{myEventsController.listMyEvents}">
						<f:param value="#{eventController.user.id}" name="userId" />
						<h:outputText value="My Events" />
					</h:commandLink>
					<h:commandLink action="#{manageAccountController.manageAccount}">
						<f:param value="#{eventController.user.id}" name="userId" />
						<h:outputText value="My Account" />
					</h:commandLink>
							<h:commandLink action="#{loginController.logout}">
						<h:outputText value="Log Out" />
					</h:commandLink>
				</h:panelGrid>
				<hr />
				
				<h1><h:outputText value="Create Time Slot for Position: "/>
				 <h:outputText style="color: blue" value="#{eventController.position.name}"/>
				</h1>
				<h:outputText value="" escape="false"/>
			
			    <h:outputText value="<br/><br/>" escape="false"/>
                <h:outputText id="summary"/>
                <h:message for="summary" style="color: Red" />
                <h:outputText value="<br/><br/>" escape="false"/>
                <h:panelGrid columns="2">
                    <h:panelGroup>
						<h:outputText value="Start Time : " />
						<h:outputText value="<br/>" escape="false" />
						<h:outputText style="color: #DC143C" value="ex. 8:00 am"/>
				   </h:panelGroup>
                   <h:panelGroup>
                      <h:inputText id="startTimeSlot" value="#{eventController.timeSlot.startTime}">
     						<f:converter converterId="com.ochnas.volunteersignup.ui.TimeConverter"/>
  					  </h:inputText>
                      <h:message for="startTimeSlot" style="color: Red"/>
                   </h:panelGroup>
                   
                   <h:panelGroup>
						<h:outputText value="End Time : " />
						<h:outputText value="<br/>" escape="false" />
						<h:outputText style="color: #DC143C" value="ex. 12:30 pm"/>
				   </h:panelGroup>
                   <h:panelGroup>
                      <h:inputText id="endTimeSlot" value="#{eventController.timeSlot.endTime}">
     						<f:converter converterId="com.ochnas.volunteersignup.ui.TimeConverter"/>
  					  </h:inputText>
                      <h:message for="endTimeSlot" style="color: Red"/>
                   </h:panelGroup>
                   
                   <h:outputText value="Quantity of Volunteers : "/> 
                   <h:panelGroup>
                      <h:inputText id="qOfVolunteers" 
                                	 value="#{eventController.timeSlot.quantityOfVolunteers}"/>
                      <h:message for="qOfVolunteers" style="color: Red"/>
                   </h:panelGroup>
              </h:panelGrid>
                 
                <h:panelGrid columns="2" cellspacing="15">
	                 <h:commandButton value="Save" action="#{eventController.saveTimeSlot}"/>
	                
	                 <h:commandButton value="Cancel" action="#{eventController.cancelTimeSlot}" immediate="true"/>
           		</h:panelGrid>
             </h:form>
          </body>
       </f:view>
    </html>